<template>
  <div class="page_inner enterpriseAudit">

      <el-row>
      <el-col :span="24">
        <div class="page_inner_top">
          <span class="page_inner_top_tit">订单中心 / 订单列表</span>
          <span class='page_inner_top_back'>返回</span>
        </div>
      </el-col>
    </el-row>
    <div class="line" style="border-bottom: 1px solid #f2f2f2;margin-top: 20px;"></div>
    <div class="serch">
      <div class='serch_tit'>筛选条件</div>
        <div style="margin-bottom:20px">
          <div style="float:left">
            <div class="phone_s">
              手机号
              <el-input class='phone_input' v-model="s_phone" placeholder="请输入手机号"></el-input>
            </div>
          </div>
          <div style="margin-left:40px;float:left">
            <div class="ctime_s">
              创建时间
              <el-date-picker
                style="width: 200px;margin-left:20px"
                v-model="value6"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </div>
          </div>
          <div style="float:left">
            <div class="time_k">
              <span :class="[t_num==1 ? 'time_k_active': '','time_k_com']" @click="timek_tab(1)">今天</span>
              <span :class="[t_num==2 ? 'time_k_active': '','time_k_com']" @click="timek_tab(2)">昨天</span>
              <span :class="[t_num==3 ? 'time_k_active': '','time_k_com']" @click="timek_tab(7)">近7天</span>
              <span :class="[t_num==4 ? 'time_k_active': '','time_k_com']" @click="timek_tab(30)">近30天</span>
            </div>
          </div>
          <div style="margin-left: 30px;float:right">
            <div class="serch_reset">
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
            </div>
          </div>
          <div style="clear:both"></div>
        </div>
      <transition name="mybox">
      <div class="box_more" v-if='show_or'>
        <div>
          <div style="float:left">
            <div class="qy_name">
              企业名称
            <el-input class='qy_name_input' v-model="qy_name" placeholder="请输入名称"></el-input>
            </div>
          </div>
          <div style="margin-left:40px;float:left">
            <div class="sz_city">
              所在城市
              <el-select v-model="value" placeholder="请选择" style="width: 98px;margin-left: 20px;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="value" placeholder="请选择" style="width: 98px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
        </div>
          <div style="margin-left: 40px;float:left">
            <div class="zc_from" >
              注册来源
              <el-select v-model="value" placeholder="请选择" style="width: 200px;margin-left:20px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div style="clear:both"></div>
        </div>
      </div>
    </transition>
    <div class='con_show_or'>
      <span :class="{'el-icon-arrow-up':true,'el_icon_dow':icon_xuanz}"></span>
      <span @click='show_more_serch'>更多筛选</span>
    </div>
    </div>

    <div class="data_list">
      <div class="data_list_tit">
        数据列表
      </div>
      <div class='data_list_tab'>
        <ul class='tab_ul'>
          <li :class="[tab_li_active == 1 ? 'tab_li':'']" @click="tab_li_active=1">全部
            <span class='pan_tab_li'></span>
          </li>
          <li :class="[tab_li_active == 2 ? 'tab_li':'']" @click="tab_li_active=2">邀请中
            <span class='pan_tab_li'></span>
          </li>
          <li :class="[tab_li_active == 3 ? 'tab_li':'']" @click="tab_li_active=3">待同意
            <span class='pan_tab_li'></span>
          </li>
          <li :class="[tab_li_active == 4 ? 'tab_li':'']" @click="tab_li_active=4">待开工
            <span class='pan_tab_li'></span>
          </li>
          <li :class="[tab_li_active == 5 ? 'tab_li':'']" @click="tab_li_active=5">进行中
            <span class='pan_tab_li'></span>
          </li>
          <li :class="[tab_li_active == 6 ? 'tab_li':'']" @click="tab_li_active=6">待验收
            <span class='pan_tab_li'></span>
          </li>
          <li :class="[tab_li_active == 7 ? 'tab_li':'']" @click="tab_li_active=7">待付款
            <span class='pan_tab_li'></span>
          </li>
          <li :class="[tab_li_active == 8 ? 'tab_li':'']" @click="tab_li_active=8">已完成
            <span class='pan_tab_li'></span>
          </li>
          <li :class="[tab_li_active == 9 ? 'tab_li':'']" @click="tab_li_active=9">已取消
            <span class='pan_tab_li'></span>
          </li>
          <el-button plain icon="el-icon-printer">导出</el-button>
        </ul>

      </div>
      <div class='data_list_center'>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="用户编号" align="center" width="100" show-overflow-tooltip> </el-table-column>
            <el-table-column label="手机号" align="center" width='120'>
              <template slot-scope="scope">

                  <span id="targets" >{{scope.row.name}}</span>
                  <!-- <span class="btn" data-clipboard-action="copy" data-clipboard-target="#targets">
                  点我复制
                  </span> -->



              </template>
            </el-table-column>
            <el-table-column prop="address" label="企业名称" align="center"> </el-table-column>
            <el-table-column prop="city" label="所在城市" align="center"> </el-table-column>
            <el-table-column prop="status" label="认证状态" align="center" width='90'> </el-table-column>
            <el-table-column prop="laiy" label="注册来源" align="center" width='90'> </el-table-column>
            <el-table-column prop="ctime" label="注册时间" align="center" width='95'> </el-table-column>
            <el-table-column prop="ca" label="操作" align="center"> </el-table-column>
          </el-table>
          <div style='margin-top:20px;margin-bottom:30px;text-align:right' class="block">
            <el-pagination @current-change="handleCurrentChange1" :current-page="currentPage1"
                @size-change="handleSizeChange1"
                :page-size="curPageSize1"
                :page-sizes="[10, 20, 30,50]"
                layout=" total,sizes,prev, pager, next"
                :total="tableDataLength1">
            </el-pagination>
        </div>
      </div>
    </div>


  <!-- <div class="el-scrollbar__bar is-vertical">
    <div class="el-scrollbar__thumb"></div>
  </div> -->
  </div>

</template>

<script>
import { time_jz } from "api/timeJz.js"
export default {

  data() {
    return {
      //当前页数
      currentPage1: 1,
      //总条数
      tableDataLength1: 100,
      //每页显示的条数
      curPageSize1: 10,
      activeNames: ['1'],
      value6: '',
      value:'',
      s_phone:'',
      t_num:'1',
      show_or: false,
      qy_name: '',
      icon_xuanz:false,
      tab_li_active: 1,
      tableData: [
        {
          date: '1000112121211212',
          name: '13761936614',
          address: '打零工互联网科技有限公司',
          city:'北京海淀',
          status:'未认证',
          laiy:'IOS',
          ctime: '218-09-01 10:20:12',
          ca: '通过'
        },
        {
          date: '1000112121211212',
          name: '13761936615',
          address: '打零工互联网科技有限公司',
          city:'北京海淀',
          status:'未认证',
          laiy:'IOS',
          ctime: '218-09-01 10:20:12',
          ca: '通过'
        },
        {
          date: '1000112121211212',
          name: '13761936616',
          address: '打零工互联网科技有限公司',
          city:'北京海淀',
          status:'未认证',
          laiy:'IOS',
          ctime: '218-09-01 10:20:12',
          ca: '通过'
        },
        {
          date: '1000112121211212',
          name: '13761936614',
          address: '打零工互联网科技有限公司',
          city:'北京海淀',
          status:'未认证',
          laiy:'IOS',
          ctime: '218-09-01 10:20:12',
          ca: '通过'
        },
        {
          date: '1000112121211212',
          name: '13761936614',
          address: '打零工互联网科技有限公司',
          city:'北京海淀',
          status:'未认证',
          laiy:'IOS',
          ctime: '218-09-01 10:20:12',
          ca: '通过'
        },
        {
          date: '1000112121211212',
          name: '13761936614',
          address: '打零工互联网科技有限公司',
          city:'北京海淀',
          status:'未认证',
          laiy:'IOS',
          ctime: '218-09-01 10:20:12',
          ca: '通过'
        },
        {
          date: '1000112121211212',
          name: '13761936614',
          address: '打零工互联网科技有限公司',
          city:'北京海淀',
          status:'未认证',
          laiy:'IOS',
          ctime: '218-09-01 10:20:12',
          ca: '通过'
        },
        {
          date: '1000112121211212',
          name: '13761936614',
          address: '打零工互联网科技有限公司',
          city:'北京海淀',
          status:'未认证',
          laiy:'IOS',
          ctime: '218-09-01 10:20:12',
          ca: '通过'
        },
        {
          date: '1000112121211212',
          name: '13761936614',
          address: '打零工互联网科技有限公司',
          city:'北京海淀',
          status:'未认证',
          laiy:'IOS',
          ctime: '218-09-01 10:20:12',
          ca: '通过'
        },
        {
          date: '1000112121211212',
          name: '13761936614',
          address: '打零工互联网科技有限公司',
          city:'北京海淀',
          status:'未认证',
          laiy:'IOS',
          ctime: '218-09-01 10:20:12',
          ca: '通过'
        },

      ],
      options:[]

    }
  },
  beforeRouteLeave(to, from, next) {

    to.meta.keepAlive = false;
    // to.meta.keepAlive = false;
    next();
  },

  methods: {
    timek_tab(val) {
      this.t_num = val
      var time_c = time_jz(val)
      console.log(time_c)
      this.value6 = time_c

    },
    show_more_serch() {
      this.show_or = !this.show_or;
      this.icon_xuanz = !this.icon_xuanz
    },
    //每页显示条数改变时
    handleSizeChange1(val) {
        this.curPageSize1 = val;
        // this.params.pageSize = this.curPageSize;
        // this.local_list_data()
    },
    //翻页的时候触发
    handleCurrentChange1(val) {
        var _self = this;
        _self.currentPage1 = val
        // _self.params.pageNo = _self.currentPage
        // window.sessionStorage.pagess = _self.currentPage
        // _self.local_list_data()
    },
  },
  watch: {
    value6(val){
      console.log(val)
    }
  }
}
</script>
<style lang="scss">
.enterpriseAudit {

  .box_more {
    height: 60px;
    overflow: hidden;
    .qy_name {
      text-align: left;
      color: #909399;
      font-size: 16px;
    }
    .qy_name_input {
      width: 200px;
      margin-left: 20px;
    }
    .sz_city {
      text-align: left;
      color: #909399;
      font-size: 16px;
    }
    .zc_from {
      text-align: left;
        color: #909399;
      font-size: 16px;
    }
  }

  .serch {
    .serch_tit {
      font-size: 18px;
      color: #303133;
      text-align: left;
      // font-weight: 600;
      // margin-left: 30px;
      margin-top: 20px;
    }
    .phone_s {
      text-align: left;
      color: #909399;
      .phone_input {
        margin-left: 36px;
        width: 200px;
        margin-top: 20px;
      }
    }
    .ctime_s {
      margin-top: 20px;
      text-align: left;
      color: #909399;
      font-size: 16px;
      .el-range-input {
        font-size: 12px;
      }
    }
    .time_k {
      margin-top: 20px;
      text-align: left;
      line-height: 40px;
      margin-left: 40px;
      .time_k_com {
        margin-right: 20px;
        color: #909399;
        cursor: pointer;
        // font-family: 'PingFang-SC-Regular';
      }
      .time_k_com:hover {
        color: #303133;
      }
      .time_k_active {
        color: #409eff;
      }
      .time_k_active:hover {
        color: #409eff;
      }
    }
    .serch_reset {
      margin-top: 20px;
      text-align: right;
    }
    .con_show_or {
      text-align: center;
      font-family: PingFang-SC-Semibold;
      font-size: 12px;
      color: #606266;
      span {
        // display: inline-block;
        cursor: pointer;
      }
      span:hover {
        color: #333;
      }
      .el-icon-arrow-up {
        transform: rotate(180deg);
        -webkit-transition: transform .25s linear;
      -moz-transition: transform .25s linear;
      -o-transition: transform .25s linear;
      transition: transform .25s linear;
      }
      .el_icon_dow {
        transform: rotate(0deg);
        -webkit-transition: transform .25s linear;
        -moz-transition: transform .25s linear;
        -o-transition: transform .25s linear;
        transition: transform .25s linear;
      }
    }
  }
}
</style>

